/*
 * @Author: your name
 * @Date: 2021-12-04 19:07:12
 * @LastEditTime: 2023-04-03 16:03:51
 * @LastEditors: zhangminhong zhangminhong@zhujia360.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /zhujiayun-website-manage/src/pages/login/index.tsx
 */
import React, { useState, useEffect } from 'react'
import { Form, Input, Button } from 'antd';
import { connect, useDispatch } from 'react-redux';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import VerificationCodeInput from '@/components/VerificationCodeInput';
import { SAVE_CODEURL, SAVE_LOGIN_INFO } from '@/reducers/common';
import { dispatchWithPromise } from '@/utils/util';
import { useNavigate } from 'react-router-dom';
import Style from './index.less';
import * as apiList from '@/apis/login';
import IconBox from "@/pages/login/IconBox";
import icon_password from './image/icon-password.png'
import icon_user from './image/icon-user.png'
import icon_code from './image/icon-code.png'
import logo_zje from './image/logo_zje.png'
import IMG_1496 from './image/IMG_1496.png'
interface LoginPageProps {
	loginInfo?: boolean
	img?: boolean
	imgKey: string
	title?: string
}
const LoginPage = ({ loginInfo, imgKey, title }: LoginPageProps) => {
	const h = useNavigate();
	const [form] = Form.useForm();
	const [submitting, setSubmitting] = useState(false);
	const dispatch = useDispatch()
	function submitHandle() {
		form.validateFields().then(async (values: any) => {
			setSubmitting(true);
			values.imgKey = imgKey;
			try {
				let res = await apiList.getLoginInfo(values)
				dispatchWithPromise({ type: SAVE_LOGIN_INFO, data: res.data })
				h.push('/welcome');
			} catch (e) {
				getCodeUrl()
			}
			setSubmitting(false)
		})
	}
	useEffect(() => {
		setSubmitting(submitting)
	}, [submitting])
	async function getCodeUrl() {
		try {
			let res = await apiList.getCodeUrl()
			dispatch({ type: SAVE_CODEURL, data: res.data })
		} catch (e) {

		}
	}
	return (
		<div className={Style["login_container"]}>
			<div className={Style.logo_box}>
				<img src={logo_zje} className={Style.logo} alt="" />
				<div className={Style.line} />
				<img src={IMG_1496} alt="" height={30} />
			</div>
			<div className={Style.writeText} />
			<div className={Style.login_form_container}>
				<div className={Style["login_form"]}>
					<div className={Style.login_form_top}>
						<div className={Style.welcome}>欢迎登录</div>
						<h1>筑家云运营后台管理平台</h1>
					</div>
					<div className={Style.login_text}>
						登录
					</div>
					<Form layout="vertical" form={form} className={Style.form}>
						<Form.Item name="accountName" rules={[{ required: true, message: '请输入帐号' }]}>
							<Input size="large" placeholder="请输入帐号" prefix={<IconBox icon={icon_user} />} />
						</Form.Item>
						<Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
							<Input.Password type="password" size="large" placeholder="请输入密码" prefix={<IconBox icon={icon_password} />} />
						</Form.Item>
						<Form.Item name="imgCode" rules={[{ required: true, message: '请输入验证码' }]}>
							<VerificationCodeInput size="large" placeholder="请输入验证码" Icon={<IconBox icon={icon_code} />} />
						</Form.Item>
						<Button htmlType="submit" loading={submitting} type="primary" block size="large" onClick={submitHandle}>登录</Button>
					</Form>
					<a href="https://beian.miit.gov.cn/#/Integrated/recordQuery" target="_blank" className={Style.icp}>ICP号：浙ICP备11057657号-12 杭州筑家易网络科技股份有限公司版权所有</a>
				</div>
			</div>

		</div>
	)
}
export default connect((state: any) => {
	return {
		...state.common
	}
})(LoginPage)